<script setup lang="ts">
import router from '@/router'
let checked = ref(false)
const handleRegisterRouter = () => {
  router.push({ name: 'register' })
}
</script>
<template>
  <van-nav-bar :border="false">
    <template #left>
      <van-icon name="arrow-left" size="20" color="#000" />
    </template>
  </van-nav-bar>
  <div class="login">
    <div class="login__title">欢迎使用</div>
    <div class="login__mtitle">请使用帐号密码登录</div>
    <vs-user-input-phone></vs-user-input-phone>
    <vs-user-input-pwd></vs-user-input-pwd>
    <div class="login__link">
      <van-checkbox v-model="checked">记住我</van-checkbox>
      <div>忘记密码?</div>
    </div>
    <div class="login__bot">
      还没有帐号？
      <span class="login__register" @click="handleRegisterRouter">注册</span>
    </div>
    <div class="login__submit">
      <van-button type="primary" round block>登录</van-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
.login {
  padding: 0 12px;
  margin-top: 14px;
  padding-bottom: 50px;
  &__title {
    font-size: 16px;
    font-weight: bold;
  }
  &__mtitle {
    font-size: 8px;
    color: #999;
    margin-top: 10px;
    margin-bottom: 24px;
  }
  &__link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
  }
  &__bot {
    display: flex;
    justify-content: end;
    margin-top: 20px;
  }
  &__register {
    margin-left: 4px;
  }
  &__submit {
    margin-top: 40px;
  }
}
</style>
